{% extends "embed_base.html" %}

{% block title %}{{ project.title }} - 全屏演示 - LandPPT{% endblock %}

{% block extra_css %}
<style>
/* 嵌入式全屏演示样式 */
.embed-container {
    background: #000;
}

.embed-content {
    padding: 0;
    background: #000;
    overflow: hidden;
}

.fullscreen-presentation {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #000;
    color: white;
    position: relative;
}

.presentation-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    padding: var(--spacing-sm) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: opacity 0.3s ease;
}

.presentation-header.hidden {
    opacity: 0;
    pointer-events: none;
}

.presentation-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.presentation-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.control-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.slide-counter {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.slides-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    color: #333;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    box-sizing: border-box;
}

.slide.active {
    opacity: 1;
    transform: translateX(0);
}

.slide.prev {
    transform: translateX(-100%);
}

.slide-content {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.slide-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.slide-content h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: #2d3748;
    line-height: 1.3;
}

.slide-content h3 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: var(--spacing-md);
    color: #4a5568;
    line-height: 1.4;
}

.slide-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    color: #2d3748;
}

.slide-content ul {
    text-align: left;
    max-width: 800px;
    margin: 0 auto var(--spacing-lg);
}

.slide-content li {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    color: #4a5568;
}

.navigation-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.navigation-overlay:hover {
    opacity: 1;
}

.nav-prev {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.5), transparent);
}

.nav-next {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.5), transparent);
}

.nav-icon {
    font-size: 2rem;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nav-icon:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary-gradient);
    transition: width 0.3s ease;
    z-index: 100;
}

/* 加载状态 */
.loading-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    color: #666;
}

.loading-slide .loading {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .presentation-header {
        padding: var(--spacing-xs) var(--spacing-md);
    }
    
    .presentation-title {
        font-size: 1rem;
    }
    
    .slide {
        padding: var(--spacing-lg);
    }
    
    .slide-content h1 {
        font-size: 2rem;
    }
    
    .slide-content h2 {
        font-size: 1.5rem;
    }
    
    .slide-content h3 {
        font-size: 1.3rem;
    }
    
    .slide-content p {
        font-size: 1rem;
    }
    
    .navigation-overlay {
        width: 60px;
    }
    
    .nav-icon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
}

/* 键盘导航提示 */
.keyboard-hint {
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    opacity: 0.7;
    z-index: 100;
}
</style>
{% endblock %}

{% block content %}
<div class="fullscreen-presentation">
    <!-- 演示头部 -->
    <div class="presentation-header" id="presentationHeader">
        <h1 class="presentation-title">{{ project.title }}</h1>
        <div class="presentation-controls">
            <div class="slide-counter">
                <span id="currentSlide">1</span> / <span id="totalSlides">{{ slides_count }}</span>
            </div>
            <button class="control-btn" onclick="toggleFullscreen()">
                <i class="fas fa-expand"></i>
            </button>
            <button class="control-btn" onclick="toggleControls()">
                <i class="fas fa-eye-slash"></i>
            </button>
        </div>
    </div>

    <!-- 幻灯片容器 -->
    <div class="slides-container" id="slidesContainer">
        <!-- 幻灯片将通过 JavaScript 动态加载 -->
        <div class="slide active">
            <div class="loading-slide">
                <span class="loading"></span>
                <p>正在加载演示文稿...</p>
            </div>
        </div>
    </div>

    <!-- 导航覆盖层 -->
    <div class="navigation-overlay nav-prev" onclick="previousSlide()">
        <div class="nav-icon">
            <i class="fas fa-chevron-left"></i>
        </div>
    </div>
    
    <div class="navigation-overlay nav-next" onclick="nextSlide()">
        <div class="nav-icon">
            <i class="fas fa-chevron-right"></i>
        </div>
    </div>

    <!-- 进度条 -->
    <div class="progress-bar" id="progressBar" style="width: 0%"></div>

    <!-- 键盘提示 -->
    <div class="keyboard-hint">
        使用 ← → 键或点击切换幻灯片，ESC 退出全屏
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentSlideIndex = 0;
let totalSlides = 0;
let slidesData = [];
let isControlsVisible = true;
let autoHideTimeout;

// 初始化演示
document.addEventListener('DOMContentLoaded', function() {
    loadSlides();
    setupKeyboardNavigation();
    setupAutoHideControls();
    
    // 通知父页面演示已准备就绪
    notifyParent('PRESENTATION_READY');
});

async function loadSlides() {
    try {
        const projectId = window.EMBED_CONFIG.projectId;
        const response = await makeRequest(`/api/embed/projects/${projectId}/slides-data?batch_id=${window.EMBED_CONFIG.batchId}`);
        const data = await response.json();
        
        if (data.success && data.slides_data) {
            slidesData = data.slides_data;
            totalSlides = slidesData.length;
            
            document.getElementById('totalSlides').textContent = totalSlides;
            
            renderSlides();
            updateProgress();
        } else {
            showError('无法加载幻灯片数据');
        }
    } catch (error) {
        console.error('Error loading slides:', error);
        showError('加载幻灯片时出错');
    }
}

function renderSlides() {
    const container = document.getElementById('slidesContainer');
    container.innerHTML = '';
    
    slidesData.forEach((slide, index) => {
        const slideElement = document.createElement('div');
        slideElement.className = `slide ${index === 0 ? 'active' : ''}`;
        slideElement.innerHTML = `
            <div class="slide-content">
                ${slide.content || `
                    <h2>${slide.title || `幻灯片 ${index + 1}`}</h2>
                    <p>幻灯片内容</p>
                `}
            </div>
        `;
        container.appendChild(slideElement);
    });
}

function showError(message) {
    const container = document.getElementById('slidesContainer');
    container.innerHTML = `
        <div class="slide active">
            <div class="slide-content">
                <h2 style="color: #e74c3c;">
                    <i class="fas fa-exclamation-triangle"></i>
                    出错了
                </h2>
                <p>${message}</p>
                <button class="btn btn-primary" onclick="window.location.reload()">
                    <i class="fas fa-refresh"></i> 重新加载
                </button>
            </div>
        </div>
    `;
}

function nextSlide() {
    if (currentSlideIndex < totalSlides - 1) {
        goToSlide(currentSlideIndex + 1);
    }
}

function previousSlide() {
    if (currentSlideIndex > 0) {
        goToSlide(currentSlideIndex - 1);
    }
}

function goToSlide(index) {
    if (index < 0 || index >= totalSlides) return;
    
    const slides = document.querySelectorAll('.slide');
    
    // 移除当前活动状态
    slides[currentSlideIndex].classList.remove('active');
    
    // 设置新的活动幻灯片
    currentSlideIndex = index;
    slides[currentSlideIndex].classList.add('active');
    
    // 更新计数器和进度条
    document.getElementById('currentSlide').textContent = currentSlideIndex + 1;
    updateProgress();
    
    // 通知父页面幻灯片变化
    notifyParent('SLIDE_CHANGED', { slideIndex: currentSlideIndex });
}

function updateProgress() {
    const progress = totalSlides > 0 ? ((currentSlideIndex + 1) / totalSlides) * 100 : 0;
    document.getElementById('progressBar').style.width = `${progress}%`;
}

function setupKeyboardNavigation() {
    document.addEventListener('keydown', function(event) {
        switch(event.key) {
            case 'ArrowRight':
            case ' ':
                event.preventDefault();
                nextSlide();
                break;
            case 'ArrowLeft':
                event.preventDefault();
                previousSlide();
                break;
            case 'Home':
                event.preventDefault();
                goToSlide(0);
                break;
            case 'End':
                event.preventDefault();
                goToSlide(totalSlides - 1);
                break;
            case 'Escape':
                event.preventDefault();
                exitFullscreen();
                break;
            case 'f':
            case 'F':
                event.preventDefault();
                toggleFullscreen();
                break;
        }
    });
}

function setupAutoHideControls() {
    const header = document.getElementById('presentationHeader');
    
    function resetAutoHide() {
        clearTimeout(autoHideTimeout);
        if (isControlsVisible) {
            header.classList.remove('hidden');
            autoHideTimeout = setTimeout(() => {
                header.classList.add('hidden');
            }, 3000);
        }
    }
    
    document.addEventListener('mousemove', resetAutoHide);
    document.addEventListener('keydown', resetAutoHide);
    
    resetAutoHide();
}

function toggleControls() {
    const header = document.getElementById('presentationHeader');
    isControlsVisible = !isControlsVisible;
    
    if (isControlsVisible) {
        header.classList.remove('hidden');
    } else {
        header.classList.add('hidden');
    }
}

function toggleFullscreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
            console.error('Error attempting to enable fullscreen:', err);
        });
    } else {
        document.exitFullscreen();
    }
}

function exitFullscreen() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    }
    
    // 通知父页面退出全屏
    notifyParent('EXIT_FULLSCREEN');
}

function notifyParent(type, payload = {}) {
    try {
        parent.postMessage({
            type: type,
            payload: {
                ...payload,
                projectId: window.EMBED_CONFIG.projectId,
                batchId: window.EMBED_CONFIG.batchId
            }
        }, window.EMBED_CONFIG.parentOrigin);
    } catch (error) {
        console.error('Failed to notify parent:', error);
    }
}

// 监听父页面消息
window.addEventListener('message', function(event) {
    if (event.origin !== window.EMBED_CONFIG.parentOrigin) {
        return;
    }
    
    const { type, payload } = event.data;
    
    switch (type) {
        case 'GO_TO_SLIDE':
            if (payload.slideIndex !== undefined) {
                goToSlide(payload.slideIndex);
            }
            break;
        case 'NEXT_SLIDE':
            nextSlide();
            break;
        case 'PREV_SLIDE':
            previousSlide();
            break;
        case 'TOGGLE_FULLSCREEN':
            toggleFullscreen();
            break;
        case 'EXIT_PRESENTATION':
            window.close();
            break;
    }
});

// 全屏状态变化监听
document.addEventListener('fullscreenchange', function() {
    const fullscreenBtn = document.querySelector('.control-btn i.fa-expand');
    if (fullscreenBtn) {
        fullscreenBtn.className = document.fullscreenElement ? 'fas fa-compress' : 'fas fa-expand';
    }
});
</script>
{% endblock %}
